<template>
  <!-- 这里就是input框下面的整个div -->

    <div class="bottom" @click="shopMsg(1)">
      <div v-for="item in list">
      <div class="left">
        <!-- 图片位置 -->
        <img
                class="imgs"
                src="https://img0.baidu.com/it/u=4060770951,4069855872&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt=""
        />
      </div>
      <div class="right">
        <div class="shang">
          <span class="span1"> 餐厅名称</span><br />
          <div class="span2">餐厅介绍</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      id: "",
      list:[
        {
          url:"ddd",
          branchname:"海上月",
          describle:"这是一家宇间瞩目的餐厅"
        },
        {
          url:"ddd",
          branchname:"眼前人",
          describle:"这是一家宙间瞩目的餐厅"
        }
      ]
    };
  },
  methods: {
    //从数据库中查询的id
    shopMsg(id) {
      this.$router.push({
        name: "msg",
        params: { id: id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.imgs {
  width: 100%;
  height: 100%;
}
.span2 {
  margin-top: 2.6667vw;
}
.span1 {
  font-size: 4.3667vw;
}
.shang {
  width: 80%;
  height: 15.3333vw;
  // border: red 1px solid;
  margin-top: 4.6667vw;
  margin-left: 5vw;
}
.right {
  width: 75%;
  height: 100%;
  // background-color: green;
  float: left;
}
.left {
  width: 25%;
  height: 100%;
  // background-color: yellow;
  float: left;
}
.bottom {
  width: 90%;
  height: 24.6667vw;
  // background-color: aquamarine;
  margin-top: 2.6667vw;
  margin-left: 5%;
  overflow: hidden;
  border: #e74e40 1px solid;
}
</style>